import { useLocation, useNavigate, useParams } from "react-router-dom";
import { getInvoice, deleteInvoice } from "../data";

function Invoice() {
    const navigate = useNavigate();
    const location = useLocation();
    const params = useParams();
    const invoice = getInvoice(parseInt(params.invoiceId, 10));
    return (
        <main style={{ padding: "1rem" }}>
            <h2>Invoice:{invoice.amount}</h2>
            <p>
                {invoice.name}:{invoice.number}
            </p>
            <p>
                Due Date:{invoice.due}
            </p>
            <p>
                <button
                    onClick={() => {
                        deleteInvoice(invoice.number);
                        navigate("./invoices" + location.search);
                    }}
                >
                    delete
                </button>
            </p>
        </main>
    );
}
export default Invoice;
